<template>
  <!-- 列表页面 -->
  <div class="tableSample" v-if="!showAdd && !showEdit">
    <div class="header">
      <div class="header-left">
        <p class="title">
          商家活动列表
          <el-button
                  type="primary"
                  plain
                  style="margin-left: 30px;"
                  @click="handleAdd"
                  v-if="linUserId !== 1"
          >添加</el-button
          >
        </p>
      </div>
      <div class="header-right">
        <lin-search @query="onQueryChange" placeholder="请输入活动标题" />
        <el-select v-model="sjMsgIdOne" filterable clearable placeholder="请选择商家" style="margin-left: 10px" @change="changeSj">
          <el-option
              v-for="item in sjMsgData"
              :key="item.id"
              :label="item.title"
              :value="item.id">
          </el-option>
        </el-select>
      </div>
    </div>
    <!-- 表格 -->
    <el-table border v-loading="loading" :data="tableData" stripe>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="活动详细信息" class="table-expand-title">
            </el-form-item>
            <el-form-item label="活动标题">
              <span>{{ props.row.title }}</span>
            </el-form-item>
            <el-form-item label="活动周期">
              <span>{{ props.row.week_data }}</span>
            </el-form-item>
            <el-form-item label="活动时间">
              <span v-for="(item) in props.row.items" :key="item.id">
                {{ item.start_time }} - {{ item.end_time }}
              </span>
            </el-form-item>
            <el-form-item label="活动图片">
              <span v-for="(item) in props.row.imgs" :key="item.id">
                 <el-image :src="item.img.url" style="width: 100px;margin: 0 10px;"></el-image>
              </span>
            </el-form-item>
            <el-form-item label="活动排序">
              <span>{{ props.row.order_sort }}</span>
            </el-form-item>
            <el-form-item label="活动报名人数">
              <span>{{ props.row.num_status_name }}</span>
            </el-form-item>
            <el-form-item label="报名人数" v-if="props.row.num_status === '1'">
              <span>{{ props.row.number }}</span>
            </el-form-item>
            <el-form-item label="男生报名人数" v-if="props.row.num_status === '2'">
              <span>{{ props.row.men_num }}</span>
            </el-form-item>
            <el-form-item label="女生报名人数" v-if="props.row.num_status === '2'">
              <span>{{ props.row.women_num }}</span>
            </el-form-item>
            <el-form-item label="活动介绍">
              <span v-html="props.row.content"></span>
            </el-form-item>
            <el-form-item label="注意事项">
              <span v-html="props.row.zy_content"></span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
              :show-overflow-tooltip="true"
              prop="title"
              label="活动标题"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="msg.title"
          label="活动所属商家"
          v-if="linUserId === 1"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="week_data"
          label="活动周期"
          width="300"
      >
      </el-table-column>
      <el-table-column
              :show-overflow-tooltip="true"
              prop="price"
              label="报名费用"
              width="120"
      >
      </el-table-column>
      <el-table-column
              :show-overflow-tooltip="true"
              prop="order_sort"
              label="排序(值越大越在前)"
              width="160"
      >
      </el-table-column>
      <el-table-column
          :show-overflow-tooltip="true"
          prop="num_status_name"
          label="活动报名人数"
          width="120"
      >
      </el-table-column>
      <el-table-column
              :show-overflow-tooltip="true"
              prop="update_time"
              label="更新时间"
              width="170"
      >
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" fixed="right" width="150">
        <template slot-scope="scope">
          <el-button
                  type="primary"
                  plain
                  size="mini"
                  @click.native.prevent.stop="handleEdit(scope.row)"
                  v-if="linUserId !== 1"
          >修改</el-button
          >
          <el-button
                  type="danger"
                  plain
                  size="mini"
                  @click.native.prevent.stop="handleDelete(scope.row)"
          >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" v-if="total_nums > 0">
      <el-pagination
              @current-change="handleCurrentChange"
              :background="true"
              :page-size="pageCount"
              :current-page="currentPage"
              v-if="refreshPagination"
              layout="total, prev, pager, next, jumper"
              :total="total_nums"
      ></el-pagination>
    </div>
  </div>
  <sj-activity-add
          v-else-if="showAdd"
          @addClose="addClose"
          :orderSort="orderSort"
          :sjMsgId="sjMsgId"
  ></sj-activity-add>
  <sj-activity-edit
          v-else-if="showEdit"
          @editClose="editClose"
          :SjActivityId="SjActivityId"
  ></sj-activity-edit>
</template>

<script>
import SjActivity from '@/models/sj-activity'
import SjMsg from '@/models/sj-msg'
import LinSearch from '@/components/base/search/lin-search'
import SjActivityAdd from './SjActivityAdd'
import SjActivityEdit from './SjActivityEdit'
import User from '@/lin/models/user'

export default {
  components: {
    LinSearch,
    SjActivityAdd,
    SjActivityEdit,
  },
  data() {
    return {
      tableData: [],
      sjMsgData: [],
      loading: false,
      showAdd: false,
      showEdit: false,
      orderSort: 0,
      SjActivityId: 0,
      linUserId: 0,
      sjMsgId: '',
      sjMsgIdOne: '',
      search: {
        name: '',
      },
      // 分页相关
      refreshPagination: true, // 页数增加的时候，因为缓存的缘故，需要刷新Pagination组件
      currentPage: 1, // 默认获取第一页的数据
      pageCount: 10, // 每页10条数据
      total_nums: 0, // 分组内的总数
    }
  },
  computed: {},
  created() {
    this.getSjMsgAll()
    this.getAdminUser()
    this.loading = true
    this._getTableData(this.currentPage, this.pageCount)
  },
  methods: {
    changeSj() {
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    async getSjMsgAll() {
      const res = await SjMsg.getDataAll()
      this.sjMsgData = res
    },
    async getAdminUser() {
      const res = await User.getInformation()
      this.linUserId = res.linUserId
      if (this.linUserId > 1) {
        this.sjMsgId = res.sjMsgId
      }
    },
    handleDelete(val) {
      this
        .$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
        .then(async () => {
          const res = await SjActivity.deleteData(val.id)
          if (res.error_code === 0) {
            this.$message({
              type: 'success',
              message: `${res.msg}`,
            })
            this.loading = true
            this._getTableData(this.currentPage, this.pageCount)
          }
        })
    },
    handleAdd() {
      if (this.tableData.length > 0) {
        this.orderSort = this.tableData[0].order_sort + 1
      }
      this.showAdd = true
    },
    handleEdit(val) {
      this.SjActivityId = val.id
      this.showEdit = true
    },
    addClose() {
      this.showAdd = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    editClose() {
      this.showEdit = false
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 切换分页
    async handleCurrentChange(val) {
      this.currentPage = val
      this.loading = true
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 搜索名称
    onQueryChange(query) {
      this.search.name = query.trim()
      if (!query) {
        this._getTableData(1, 10)
        return
      }
      this.loading = true
      this.currentPage = 1
      this._getTableData(this.currentPage, this.pageCount)
    },
    // 获取数据
    async _getTableData(start, count) {
      const res = await SjActivity.getDataList(start, count, {
        title: this.search.name,
        sj_msg_id: this.sjMsgId,
      })
      this.tableData = res.data
      this.total_nums = res.count
      this.$nextTick(() => {
        this.loading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
  .tableSample {
    padding: 0 0 30px;

    .demo-table-expand {
      font-size: 0;
      margin-left: 30px;
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        width: 50%;
        margin-right: 0;
        margin-bottom: 0;
        display: flex;
        flex-direction: row;
      }
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 30px;
      border-bottom: 1px solid #dae1ed;

      .header-left {
        float: left;

        .title {
          height: 59px;
          line-height: 59px;
          color: $parent-title-color;
          font-size: 16px;
          font-weight: 500;
        }
      }

      .header-right {
        float: right;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }

    .pagination {
      float: right;
      margin: 20px;
    }
  }
  // dialog
  .tableSample /deep/ .el-dialog__footer {
    //text-align: left;
    padding-left: 30px;
  }

  .tableSample /deep/ .el-dialog__header {
    padding-left: 30px;
  }

  .tableSample /deep/ .el-dialog__body {
    padding: 30px;
  }

  .el-form--inline /deep/ .el-form-item__label{
    width: 180px;
    color: #99a9bf;
  }
  .tableSample .demo-table-expand .table-expand-title {
    width: 100%;
  }
  .table-expand-title /deep/ .el-form-item__label{
    color: #333333;
    font-size: 20px;
    width: 100%;
  }
</style>
